import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  state = {
    todo: '',
    list: []
  }
  submit() {
    this.setState({
      list: [{ id: Math.random(), val: this.state.todo }].concat(this.state.list),
      todo: ''
    })
    // this.state.list.unshift({ id: Math.random(), val: this.state.todo })
    // this.state.todo = '';
    // this.setState({})
  }
  del(id) {
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }
  render() {
    let { todo, list } = this.state;
    return <div className=''>
      <input
        type="text"
        value={todo}
        onChange={(e) => { this.setState({ todo: e.target.value }) }}
        onKeyDown={(e) => { if (e.keyCode === 13) this.submit() }}
      />
      <ul>
        {
          list.map(item => {
            return <li key={item.id}> {item.val} <button onClick={() => { this.del(item.id) }}>X</button></li>
          })
        }
      </ul>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))